<!DOCTYPE HTML>
<html lang="zh-CN">


<head>
    <meta charset="utf-8">
    <meta name="keywords" content="使用Hexo免费搭建个人博客教程, 安卓开发猿">
    <meta name="description" content="Android开发技术博客">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <meta name="renderer" content="webkit|ie-stand|ie-comp">
    <meta name="mobile-web-app-capable" content="yes">
    <meta name="format-detection" content="telephone=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <!-- Global site tag (gtag.js) - Google Analytics -->


    <title>使用Hexo免费搭建个人博客教程 | 安卓开发猿</title>
    <link rel="icon" type="image/png" href="/blog/favicon.png">

    <link rel="stylesheet" type="text/css" href="/blog/libs/awesome/css/all.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/materialize/materialize.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/aos/aos.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/animate/animate.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/libs/lightGallery/css/lightgallery.min.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/matery.css">
    <link rel="stylesheet" type="text/css" href="/blog/css/my.css">

    <script src="/blog/libs/jquery/jquery.min.js"></script>
    <script src="https://sdk.jinrishici.com/v2/browser/jinrishici.js" charset="utf-8"></script>
<meta name="generator" content="Hexo 5.4.0"><link rel="alternate" href="/blog/atom.xml" title="安卓开发猿" type="application/atom+xml">
</head>




<body>
    <header class="navbar-fixed">
    <nav id="headNav" class="bg-color nav-transparent">
        <div id="navContainer" class="nav-wrapper container">
            <div class="brand-logo">
                <a href="/blog/" class="waves-effect waves-light">
                    
                    <img src="/blog/medias/logo.png" class="logo-img" alt="LOGO">
                    
                    <span class="logo-span">安卓开发猿</span>
                </a>
            </div>
            

<a href="#" data-target="mobile-nav" class="sidenav-trigger button-collapse"><i class="fas fa-bars"></i></a>
<ul class="right nav-menu">
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="https://xiayunquan.gitee.io/blog/" class="waves-effect waves-light">
      
      <i class="fas fa-home" style="zoom: 0.6;"></i>
      
      <span>首页</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/tags" class="waves-effect waves-light">
      
      <i class="fas fa-tags" style="zoom: 0.6;"></i>
      
      <span>标签</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/categories" class="waves-effect waves-light">
      
      <i class="fas fa-bookmark" style="zoom: 0.6;"></i>
      
      <span>分类</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/archives" class="waves-effect waves-light">
      
      <i class="fas fa-archive" style="zoom: 0.6;"></i>
      
      <span>归档</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/tools" class="waves-effect waves-light">
      
      <i class="fas fa-list" style="zoom: 0.6;"></i>
      
      <span>在线工具箱</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/about" class="waves-effect waves-light">
      
      <i class="fas fa-user-circle" style="zoom: 0.6;"></i>
      
      <span>关于</span>
    </a>
    
  </li>
  
  <li class="hide-on-med-and-down nav-item">
    
    <a href="/blog/friends" class="waves-effect waves-light">
      
      <i class="fas fa-address-book" style="zoom: 0.6;"></i>
      
      <span>友情链接</span>
    </a>
    
  </li>
  
  <li>
    <a href="#searchModal" class="modal-trigger waves-effect waves-light">
      <i id="searchIcon" class="fas fa-search" title="搜索" style="zoom: 0.85;"></i>
    </a>
  </li>
</ul>


<div id="mobile-nav" class="side-nav sidenav">

    <div class="mobile-head bg-color">
        
        <img src="/blog/medias/logo.png" class="logo-img circle responsive-img">
        
        <div class="logo-name">安卓开发猿</div>
        <div class="logo-desc">
            
            Android开发技术博客
            
        </div>
    </div>

    

    <ul class="menu-list mobile-menu-list">
        
        <li class="m-nav-item">
	  
		<a href="https://xiayunquan.gitee.io/blog/" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-home"></i>
			
			首页
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/tags" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-tags"></i>
			
			标签
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/categories" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-bookmark"></i>
			
			分类
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/archives" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-archive"></i>
			
			归档
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/tools" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-list"></i>
			
			Tools
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/about" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-user-circle"></i>
			
			关于
		</a>
          
        </li>
        
        <li class="m-nav-item">
	  
		<a href="/blog/friends" class="waves-effect waves-light">
			
			    <i class="fa-fw fas fa-address-book"></i>
			
			友情链接
		</a>
          
        </li>
        
        
    </ul>
</div>


        </div>

        
    </nav>

</header>

    



<div class="bg-cover pd-header post-cover" style="background-image: url('/blog/medias/featureimages/11.jpg')">
    <div class="container" style="right: 0px;left: 0px;">
        <div class="row">
            <div class="col s12 m12 l12">
                <div class="brand">
                    <h1 class="description center-align post-title">使用Hexo免费搭建个人博客教程</h1>
                </div>
            </div>
        </div>
    </div>
</div>




<main class="post-container content">

    
    <link rel="stylesheet" href="/blog/libs/tocbot/tocbot.css">
<style>
    #articleContent h1::before,
    #articleContent h2::before,
    #articleContent h3::before,
    #articleContent h4::before,
    #articleContent h5::before,
    #articleContent h6::before {
        display: block;
        content: " ";
        height: 100px;
        margin-top: -100px;
        visibility: hidden;
    }

    #articleContent :focus {
        outline: none;
    }

    .toc-fixed {
        position: fixed;
        top: 64px;
    }

    .toc-widget {
        width: 345px;
        padding-left: 20px;
    }

    .toc-widget .toc-title {
        padding: 35px 0 15px 17px;
        font-size: 1.5rem;
        font-weight: bold;
        line-height: 1.5rem;
    }

    .toc-widget ol {
        padding: 0;
        list-style: none;
    }

    #toc-content {
        padding-bottom: 30px;
        overflow: auto;
    }

    #toc-content ol {
        padding-left: 10px;
    }

    #toc-content ol li {
        padding-left: 10px;
    }

    #toc-content .toc-link:hover {
        color: #42b983;
        font-weight: 700;
        text-decoration: underline;
    }

    #toc-content .toc-link::before {
        background-color: transparent;
        max-height: 25px;

        position: absolute;
        right: 23.5vw;
        display: block;
    }

    #toc-content .is-active-link {
        color: #42b983;
    }

    #floating-toc-btn {
        position: fixed;
        right: 15px;
        bottom: 76px;
        padding-top: 15px;
        margin-bottom: 0;
        z-index: 998;
    }

    #floating-toc-btn .btn-floating {
        width: 48px;
        height: 48px;
    }

    #floating-toc-btn .btn-floating i {
        line-height: 48px;
        font-size: 1.4rem;
    }
</style>
<div class="row">
    <div id="main-content" class="col s12 m12 l9">
        <!-- 文章内容详情 -->
<div id="artDetail">
    <div class="card">
        <div class="card-content article-info">
            <div class="row tag-cate">
                <div class="col s7">
                    
                    <div class="article-tag">
                        
                            <a href="/blog/tags/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/">
                                <span class="chip bg-color">环境搭建</span>
                            </a>
                        
                    </div>
                    
                </div>
                <div class="col s5 right-align">
                    
                    <div class="post-cate">
                        <i class="fas fa-bookmark fa-fw icon-category"></i>
                        
                            <a href="/blog/categories/%E5%AE%9E%E7%94%A8%E5%B7%A5%E5%85%B7/" class="post-category">
                                实用工具
                            </a>
                        
                    </div>
                    
                </div>
            </div>

            <div class="post-info">
                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-minus fa-fw"></i>发布日期:&nbsp;&nbsp;
                    2021-10-13
                </div>
                

                
                <div class="post-date info-break-policy">
                    <i class="far fa-calendar-check fa-fw"></i>更新日期:&nbsp;&nbsp;
                    2023-02-24
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-file-word fa-fw"></i>文章字数:&nbsp;&nbsp;
                    9.1k
                </div>
                

                
                <div class="info-break-policy">
                    <i class="far fa-clock fa-fw"></i>阅读时长:&nbsp;&nbsp;
                    34 分
                </div>
                

                
                    <div id="busuanzi_container_page_pv" class="info-break-policy">
                        <i class="far fa-eye fa-fw"></i>阅读次数:&nbsp;&nbsp;
                        <span id="busuanzi_value_page_pv"></span>
                    </div>
				
            </div>
        </div>
        <hr class="clearfix">

        
        <!-- 是否加载使用自带的 prismjs. -->
        <link rel="stylesheet" href="/blog/libs/prism/prism.css">
        

        

        <div class="card-content article-card-content">
            <div id="articleContent">
                <h3 id="前言"><a href="#前言" class="headerlink" title="前言"></a>前言</h3><p>现在各种互联网博客非常的，常见的如CSDN、简书、掘金、博客园等平台，这些博客平台做的都很好，可以直接在上面注册自己的账号写文章，发表的文章在百度、Bing等搜索引擎上也能收到，但缺点是受于平台的各种限制，个人定制化不自由，而且大多数平台都会有各种广告。</p>
<p>于是想到自己搭建一个博客网站，但对大多数人而言，自己购买服务器和域名来搭建博客成本实在太高的了，而且有点浪费，还需要定期维护，这时一种不错的选择就是使用第三方开源托管平台（GitHub、GitLab等）来当作我们的服务器，并使用快速简洁的博客搭建框架-<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">Hexo</a>来搭建博客网站就非常容易了，下面就来介绍一下使用hexo搭建博客的步骤及一些配置吧。</p>
<h3 id="Hexo简介"><a href="#Hexo简介" class="headerlink" title="Hexo简介"></a>Hexo简介</h3><p>Hexo是由台湾大佬开发的一款基于Node.js的静态博客框架，依赖少易于安装使用，可以方便的生成静态网页托管在GitHub、Coding、Gitlab等平台上，是搭建博客的首选框架。而且Hexo支持Markdown的所有语法功能来编辑网页内容，编辑的内容生产静态网页速度很快，上百个页面在几秒内瞬间完成渲染。Hexo部署发布也很方便，只需要一条指令即可发布到配置GitHub、 Heroku 等平台。下面就开始一步步的完成搭建吧，大家也可以进入<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/">Hexo官网</a>查看详细的搭建教程。</p>
<h3 id="1-安装Git"><a href="#1-安装Git" class="headerlink" title="1. 安装Git"></a>1. 安装Git</h3><p><a target="_blank" rel="noopener" href="https://git-scm.com/downloads">Git</a>是目前世界上最先进的分布式版本控制系统，可以有效、快速的处理各种项目版本管理。在这里就是用来管理我们写的Hexo博客文章，并上传到GitHub等平台的工具。</p>
<p>在Mac和Linux系统上安装Git非常容易。</p>
<p><strong>Mac</strong>电脑上安装只需要执行下面的命令即可，使用<a target="_blank" rel="noopener" href="https://brew.sh/index_zh-cn">Homebrew</a>来安装</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">brew install git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p><strong>Linux</strong>是一个开源的操作系统，市面上有很多优秀的Linux系统，不同的系统上安装Git执行的命令可能略有不同，具体的查看<a target="_blank" rel="noopener" href="https://git-scm.com/download/linux">Git官网</a>上对应系统的安装命令，这里以Ubuntu系统安装Git为例。</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">sudo apt-get install git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p><strong>Windows</strong> 上安装需要先<a href="%5Bhttps://gitforwindows.org/">下载Git安装包</a>，然后点击安装包使用默认的配置一步步安装就可以了。</p>
<p>安装完成之后在命令执行窗口输入<code>git --version</code>即可检查是否安装成功，并能看到安装的git版本号。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/GitCmd.jpg" alt="GitCmd" title="Git"></p>
<p>Git有一个专门命令行工具Git Bash，Windows在任何地方只要鼠标右键，然后点击<code>Git Bash Here</code>就可以在当前目录路径下打开命令行窗口了。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/Git.jpg" alt="Git"></p>
<h3 id="2-安装nodejs"><a href="#2-安装nodejs" class="headerlink" title="2. 安装nodejs"></a>2. 安装nodejs</h3><p>Hexo是基于<a target="_blank" rel="noopener" href="https://nodejs.org/en/download/">nodeJS</a>编写的，所以需要安装一下nodeJs和里面的npm工具。</p>
<p>Windows和Mac上面安装，下载nodejs的LTS版本的进行安装就可以了。</p>
<p>Linux上面安装直接执行下面的命令即可：</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">sudo apt-get install nodejs
sudo apt-get install npm<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>安装成功之后可以使用下面的命令查看是否安装成功及对应版本号：</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">node -v
npm -v<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>



<h3 id="3-安装Hexo"><a href="#3-安装Hexo" class="headerlink" title="3. 安装Hexo"></a>3. 安装Hexo</h3><p>前面git和nodejs安装好后，就可以安装hexo了，你可以先创建一个文件夹如blog，然后<code>cd</code>到这个文件夹下（或者在这个文件夹下直接右键git bash here打开）。</p>
<p>输入下面的命令安装Hexo：</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">npm install -g hexo-cli<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>然后可以使用<code>hexo -v</code>查看是否安装成功及hexo的版本号。</p>
<p>Hexo安装之后，再执行下面命令初始化Hexo项目，这里的<code>Blog</code>名称可以随便取。</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">hexo init Blog
cd Blog
npm install<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>初始化成功之后，会在当前目录下面创建一个Blog文件夹，Blog文件下面会生成下面这些目录文件：</p>
<ul>
<li>node_modules: 依赖包</li>
<li>scaffolds：生成文章的一些模板</li>
<li>source：用来存放你的文章</li>
<li>themes：主题</li>
<li>_config.yml: 博客的配置文件</li>
</ul>
<p>然后可以使用下面的命令生成静态网页</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">hexo generate 或简写成 hexo g<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>最后启动本地服务可以让我们在浏览器上本地预览一下网页</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">&#x2F;&#x2F; 开启本地服务，可以使用 Ctrl + C 停止服务
hexo server 或简写成 hexo s <span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>服务开启之后，就可以在浏览器上面输入下面的地址访问Hexo网页了</p>
<pre class="line-numbers language-http" data-language="http"><code class="language-http"><span class="token header-name keyword">http:</span><span class="token header-name keyword">localhost:</span>4000 或 http://127.0.0.1:4000<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p><img src="/blog/HexoBlogBuildAndConfig/HelloHexo.png" alt="hello hexo"></p>
<p>到此，我们的博客已经实现了在本地服务器上面访问了，但是我们还需要将我们的博客发布到远程服务器上，让更多的人访问。</p>
<h3 id="4-将Hexo博客托管到第三方平台"><a href="#4-将Hexo博客托管到第三方平台" class="headerlink" title="4. 将Hexo博客托管到第三方平台"></a>4. 将Hexo博客托管到第三方平台</h3><p>我们可以将我们的博客托管到GitHub、Gitlab、Coding等平台上面，这里以GitHub为例，其他平台操作步骤大致相同。</p>
<h4 id="4-1-创建一个GitHub个人仓库"><a href="#4-1-创建一个GitHub个人仓库" class="headerlink" title="4.1 创建一个GitHub个人仓库"></a>4.1 创建一个GitHub个人仓库</h4><p>首先，你先要有一个GitHub账户，可以使用邮箱注册。</p>
<p>注册完登录后，在github.com中看到一个New repository，点击新建仓库。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/NewRepository.png" alt="New Repository"></p>
<p>创建一个和你用户名相同的仓库，后面加.github.io，只有这样，将来要部署到GitHub page的时候，才会被识别，也就是xxx.github.io，其中xxx就是你注册GitHub的用户名。我这里是已经创建过了。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/CreateRepository.png" alt="Create Repository"></p>
<p>输入仓库名之后直接点击Create repository就可以了。</p>
<h4 id="4-2-生成SSH并添加到GitHub"><a href="#4-2-生成SSH并添加到GitHub" class="headerlink" title="4.2 生成SSH并添加到GitHub"></a>4.2 生成SSH并添加到GitHub</h4><p>首先需要配置一下Git的user.name和user.email信息，直接使用下面的命令：</p>
<pre class="line-numbers language-git" data-language="git"><code class="language-git">git config user.name <span class="token string">"your github account"</span>
git config user.email <span class="token string">"your email"</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>这里的user.name输入你的GitHub用户名，user.email输入你GitHub的邮箱。这样GitHub才能知道你是不是对应它的账户。配置之后可以使用</p>
<pre class="line-numbers language-git" data-language="git"><code class="language-git">git config user.name
git config user.email<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>来查看配置的信息，然后执行下面的命令创建SSH。</p>
<pre class="line-numbers language-none"><code class="language-none">ssh-keygen -t rsa -C &quot;your email&quot;<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>输入命令之后会提示输入密码，不用管直接一路回车，最后会在你的计算机用户（如WIndows为C:/Users/xyq/）下面生成一个<code>.ssh</code>文件夹（需要设置显示隐藏文件及文件夹），可以看到.ssh文件下面有2个文件<code>id_rsa</code>和<code>id_rsa.pub</code>,</p>
<p>ssh，简单来讲，就是一个秘钥，其中，id_rsa是你这台电脑的私人秘钥，不能给别人看的，id_rsa.pub是公共秘钥，可以随便给别人看。把这个公钥放在GitHub上，这样当你链接GitHub自己的账户时，它就会根据公钥匹配你的私钥，当能够相互匹配时，才能够顺利的通过git上传你的文件到GitHub上。</p>
<p>而后在GitHub的Setting中，找到SSH keys的设置选项，点击New SSH key<br>把你的id_rsa.pub用记事本打开，然后把里面的全部信息复制到Key里面，Title可以随便填写，然后点击Add SSH Key就可以了。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/AddSSH.png" alt="Add SSH Key"></p>
<p>然后输入下面的命令可以查看我们的配置是否成功：</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">ssh -T git@github.com<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>



<h4 id="4-3-将Hexo发布到GitHub"><a href="#4-3-将Hexo发布到GitHub" class="headerlink" title="4.3 将Hexo发布到GitHub"></a>4.3 将Hexo发布到GitHub</h4><p>这一步，我们就可以将Hexo和GitHub关联起来，也就是将Hexo生成的文章部署到GitHub上，打开站点配置文件 <code>_config.yml</code>，翻到最后，修改为如下配置：</p>
<pre class="line-numbers language-none"><code class="language-none">deploy:
  type: git
  repo: 
    github: git@github.com:xiayunquan&#x2F;xiayunquan.github.io.git,master
    coding: your_coding_project_url,master
    gitee: https:&#x2F;&#x2F;gitee.com&#x2F;xiayunquan&#x2F;xiayunquan.git,master<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>type就是仓库管理系统，我们用的是git；repo就是代码托管平台，这里需要配置你的仓库地址和git分支，我这里配置了GitHub、Coding，还有gitee平台，你想部署到哪个平台就可以在后面添加，如果你只有GitHub，就不用加后面的coding和gitee的配置，仓库地址可以使用<code>https</code>地址或<code>ssh</code>地址2种方式，因为我们已经配置了ssh公钥，所以这里使用ssh地址的形式，使用https地址形式在提交git代码的时候可能要输入账号和密码，不方便，还有就是国内使用https形式提交到GitHub服务器上的时候，可能存在网络代理的问题，但是我这里gitee使用的是https的形式，是因为公司的网络吧gitee部署的端口22给禁了，正常情况下2种形式都是可以的。</p>
<p>配置文件修改好了之后，接下来就是发布网站了，但首先我们要安装一下<code>hexo-deployer-git</code>这个插件，</p>
<pre class="line-numbers language-none"><code class="language-none">npm install hexo-deployer-git --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>最后执行下面的命令就可以把网站部署到GitHub了</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">&#x2F;&#x2F; 清除生成的缓存数据
hexo clean

&#x2F;&#x2F; 生成静态网页内容
hexo generate 或 hexo g

&#x2F;&#x2F; 发布
hexo deploy 或 hexo d<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>当看到命令窗口打印<code>INFO Deploy done:git</code>就说明部署成功了，过一会儿就可以在<code>https://yourGithubName.github.io</code> 这个网站看到你的博客了！！</p>
<p>ps.另外，如果是部署到gitee的话，执行<code>hexo d</code>之后还需要手动在gitee上面点一下“更新”，真正的部署到gitee服务器上面，如下所示。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/gitee.png" alt="Git"></p>
<h4 id="4-4-绑定个人域名"><a href="#4-4-绑定个人域名" class="headerlink" title="4.4 绑定个人域名"></a>4.4 绑定个人域名</h4><p>现在你的个人网站的地址是 yourname.github.io，如果觉得这个网址逼格不太够，这就需要你设置个人域名了，但是需要花钱。如果不需要绑定个人域名就可以直接跳过这一步。</p>
<p>域名注册平台有很多，如阿里云、Godaddy、Namesilo等，不同的平台收费和续费价格不一样，注册的域名不同的后缀的价格也不一样，比如最广泛的.com就比较贵，看个人喜好咯。这里以Namesilo为例看一下如何购买域名。</p>
<p>首先需要注册一个Namesilo账号并登录，然后在输入框输入你想要创建的域名（不带后缀），</p>
<p>然后看到有很多不同后缀的域名可以选择，选一个你喜欢的域名点击Add添加到购物车，</p>
<p><img src="/blog/HexoBlogBuildAndConfig/domain.jpg" alt="选择域名"></p>
<p>购买成功后,需要到注册时填写的邮箱地址确认，然后需要先去进行实名认证,然后在域名控制台中，就能看到你购买的域名。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/dns.jpg" alt="域名解析"></p>
<p>接下来需要点击右边的蓝色按钮进行DNS解析，</p>
<p>默认会生成几条解析记录，把后面的删除，只留下两条记录<code>A</code>和<code>CNAME</code>，可以点击<code>EDIT</code>修改内容。也可以全部删除，自己创建新的记录。可以看到我们需要输入ip地址，这个ip地址就是前面我们博客对应的ip，在命令窗口使用下面的命令就可以得到ip了：</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">ping yourgithubname.github.io<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p><img src="/blog/HexoBlogBuildAndConfig/ping.jpg" alt="ping"></p>
<p>有了ip地址之后，我们编辑<code>A</code>记录的ip为刚刚的pin出来的ip就行了，A记录的作用就是输入个人域名后会跳转到 github博客的ip站点，然后再编辑<code>CNAME</code>记录，HOSTNAME输入框中输入<code>www</code> ，地址框中输入个人域名yourgithubname.github.io就可以了，CNAME记录的作用就是输入个人域名后，会跳转到github博客的域yourgithubname.github.io，通过域名跳转到对应ip站点。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/dns2.jpg" alt="域名解析"></p>
<p>最后，需要把这个申请的个人域名配置到GitHub你的仓库的Setting中，</p>
<p><img src="/blog/HexoBlogBuildAndConfig/binddomain.jpg" alt="绑定域名"></p>
<p>点击Save保存成功之后，过一会儿就可以使用个人域名进行访问了，当然使用yourgithubname.github.io也是可以访问博客的，只是会自动的跳转到你什么的域名。</p>
<p>最后需要注意的是我们购买的域名有效期是1年，如果你需要到期后自动续费，可以在刚开始购买的时候配置自动续费，默认是不自动续费，第一次购买的时候一般有折扣，自动续费的时候就没有折扣了，这个看自己的需求了。</p>
<h4 id="4-5-将博客源文件提交到GitHub分支"><a href="#4-5-将博客源文件提交到GitHub分支" class="headerlink" title="4.5 将博客源文件提交到GitHub分支"></a>4.5 将博客源文件提交到GitHub分支</h4><p>由于<code>hexo d</code>上传部署到GitHub的其实是hexo编译后的文件，是用来生成网页的，不包含源文件。也就是上传的是在本地目录里自动生成的<code>.deploy_git</code>里面。而其他文件 ，包括我们写在source 里面的，和配置文件，主题文件，都没有上传到GitHub。如果你现在在自己的笔记本上写的博客，部署在了网站上，那么你在家里用台式机，或者实验室的台式机，发现你电脑里面没有博客的文件，或者要换电脑了，最后不知道怎么移动文件，怎么办？</p>
<p>在这里我们就可以新建一个git的分支专门管理我们的源文件，这样每次打开不一样的电脑，只需要进行简单的配置和并把GitHub上的文件同步下来，就可以无缝操作了。</p>
<p>首先，需要在GitHub上新建一个分支，如“source”分支，名字随便起。并在这个仓库的Settings中，设置默认分支为刚刚创建的分支source（这样每次同步的时候就不用指定分支，比较方便）。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/DefaultBranchs.jpg" alt="默认分支设置"></p>
<p>然后在本地的任意目录下执行下面命令</p>
<pre class="line-numbers language-none"><code class="language-none">&#x2F;&#x2F; git clone git@github.com:xiayunquan&#x2F;xiayunquan.github.io.git
git clone your_repository_git_address<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>

<p>将你的仓库克隆到本地，因为默认分支已经设成了source，所以clone时只会clone了source分支。</p>
<p>接下来在克隆到本地的yourgithubname.github.io中，把除了.git 文件夹外的所有文件都删掉</p>
<p>把之前我们写的博客源文件全部复制过来，除了.deploy_git。复制过来的源文件应该有一个.gitignore，用来忽略一些不需要的文件，如果没有的话，自己新建一个，在里面写上如下内容，表示这些类型文件不需要上传到git：</p>
<pre class="line-numbers language-none"><code class="language-none">.DS_Store
Thumbs.db
db.json
*.log
node_modules&#x2F;
public&#x2F;
.deploy*&#x2F;<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>注意，如果你之前克隆过theme中的主题文件，那么应该把主题文件中的.git文件夹删掉，因为git不能嵌套上传，最好是显示隐藏文件，检查一下有没有，否则上传的时候导致你的themes下面的主题文件无法上传，上传之后GitHub的themes下面的文件夹是空的，文件夹图标上有一个向右的白色箭头，如下所示</p>
<p><img src="/blog/HexoBlogBuildAndConfig/ChildGitProject.jpg" alt="Git子系统文件夹"></p>
<p>这就说明themes下面还有一个.get目录，解决办法就是删除themes下面的这个.git文件，然后再执行下面的命令即可。</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">git rm --cached [文件夹名，比如这里的hexo-themes-matery]
git add .
git commit -m &quot;commit messge&quot;
git push origin [branch_name]<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p>这样所有的源文件就上传完了，可以在你的github上看一看创建的分支上有没有上传上去，其中<code>node_modules</code>、<code>public</code>、<code>db.json</code>已经被忽略掉了，没有关系，这些是自动生成的，不需要上传，因为在别的电脑上需要重新输入命令会重新生成 。</p>
<p><strong>更换电脑操作</strong><br>在另一台电脑上搭建博客的环境，跟之前的环境搭建流程一样，</p>
<ul>
<li>安装git，并设置git全局邮箱和用户名</li>
<li>安装nodejs</li>
<li>安装hexo</li>
<li>然后在任意文件夹下，克隆source分支到文件夹</li>
<li>进入这个文件夹，执行<code>npm install</code>和<code>npm install hexo-deployer-git --save</code>，安装nodejs环境及部署插件</li>
<li>最后执行<code>hexo g</code>和<code>hexo d</code>生成并部署网站就可以在新电脑上开始写你的博客了</li>
</ul>
<p>但是不要忘了，每次写完最好都把源文件上传到GitHub，这样在其他电脑上每次先拉去一下最新的源文件就能继续写文章了。</p>
<p>到此，我们的博客基本框架搭建就已经完成了，接下来就可以开始你的博客文章创作以及修改博客主题的一些配置。</p>
<h3 id="Hexo的基本配置"><a href="#Hexo的基本配置" class="headerlink" title="Hexo的基本配置"></a>Hexo的基本配置</h3><p>在博客的根目录下的<code>_config.yml</code>就是整个hexo框架的配置文件了。可以在里面修改大部分的配置。详细的配置可参考<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/configuration">官方配置</a> 。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/config.jpg" alt="Hexo配置文件"></p>
<p>配置参数非常多，这里看一些必须的配置</p>
<table>
<thead>
<tr>
<th>参数</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>title</td>
<td>网站标题</td>
</tr>
<tr>
<td>subtitle</td>
<td>网站副标题</td>
</tr>
<tr>
<td>description</td>
<td>网站描述</td>
</tr>
<tr>
<td>author</td>
<td>你的名字，文章的作者</td>
</tr>
<tr>
<td>language</td>
<td>网站使用的语言</td>
</tr>
<tr>
<td>timezone</td>
<td>网站时区。Hexo 默认使用您电脑的时区。</td>
</tr>
<tr>
<td>url</td>
<td>网址，需要把<code>url</code>改成你的网站域名。</td>
</tr>
<tr>
<td>root</td>
<td>网站根目录，这里写/即可</td>
</tr>
<tr>
<td>permalink</td>
<td>文章的 永久链接 格式</td>
</tr>
<tr>
<td>theme</td>
<td>网站的主题，如果你不喜欢默认的主题，你可以去<a target="_blank" rel="noopener" href="https://hexo.io/themes/">官网</a>下载一个你喜欢的主题，然后放到themes目录下面，再将这个theme参数修改为你的主题就可以了，具体的稍后会讲</td>
</tr>
<tr>
<td>deploy</td>
<td>网站部署配置</td>
</tr>
<tr>
<td></td>
<td>仓库类型</td>
</tr>
<tr>
<td></td>
<td>仓库地址，这个我们前面已经配置过了</td>
</tr>
<tr>
<td></td>
<td>仓库分支，如果有多个仓库，则分支直接写在repo地址后面</td>
</tr>
</tbody></table>
<p>permalink，也就是你生成某篇文章时的那个链接格式，具体的格式选项请参考<a target="_blank" rel="noopener" href="https://hexo.io/zh-cn/docs/permalinks">官方配置的永久链接</a>格式。</p>
<p>trailing_index，为true表示不显示文章链接最后的.html，</p>
<p>比如我新建一个文章叫temp.md，那么这个时候他自动生成的地址就是<a target="_blank" rel="noopener" href="http://yoursite.com/temp/%E3%80%82">http://yoursite.com/temp/。</a></p>
<h3 id="更换主题"><a href="#更换主题" class="headerlink" title="更换主题"></a>更换主题</h3><p>Hexo官网上面有非常多好看的主题，你可以选择自己喜欢的主题下载下来放到themes文件夹下面，个人觉得比较好看的主题有Butterfly、Indigo、Matery等，这里以更换为Matery主题为例。</p>
<p>首先点击 <a target="_blank" rel="noopener" href="https://codeload.github.com/blinkfox/hexo-theme-matery/zip/master">官方下载地址</a> 下载 <code>master</code> 分支的最新稳定版的代码，解压缩后，将 <code>hexo-theme-matery</code> 的文件夹复制到你 Hexo 的 <code>themes</code> 文件夹中即可。</p>
<p>当然你也可以在你的 <code>themes</code> 文件夹下使用 <code>git clone</code> 命令来下载:</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">git</span> clone https://github.com/blinkfox/hexo-theme-matery.git<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<blockquote>
<p>记得下载之后把hexo-theme-matery目录下面的.git目录删除，不然会出现上面说过的源文件无法上传到GitHub的情况</p>
</blockquote>
<p>然后修改 Hexo 根目录下的 <code>_config.yml</code> 的  <code>theme</code> 的值：<code>theme: hexo-theme-matery</code></p>
<p>建议把根目录下的_config.yml配置文件中的per_page的分页条数值修改为 <code>6</code> 的倍数，如：<code>12</code>、<code>18</code> 等，这样文章列表在各个屏幕下都能较好的显示，我设置的10，但是主题会默认给我们修改成6的倍数，一页显示了12条数据。</p>
<h4 id="新建分类-categories-页"><a href="#新建分类-categories-页" class="headerlink" title="新建分类 categories 页"></a>新建分类 categories 页</h4><p><code>categories</code> 页是用来展示所有分类的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>categories/index.md</code> 文件，那么你就需要新建一个，命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"categories"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>编辑你刚刚新建的页面文件 <code>/source/categories/index.md</code>，至少需要以下内容：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> categories
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-09-30 17:25:30</span>
<span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"categories"</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"categories"</span>
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="新建标签-tags-页"><a href="#新建标签-tags-页" class="headerlink" title="新建标签 tags 页"></a>新建标签 tags 页</h4><p><code>tags</code> 页是用来展示所有标签的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>tags/index.md</code> 文件，那么你就需要新建一个，命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"tags"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>编辑你刚刚新建的页面文件 <code>/source/tags/index.md</code>，至少需要以下内容：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> tags
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-09-30 18:23:38</span>
<span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"tags"</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"tags"</span>
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="新建关于我-about-页"><a href="#新建关于我-about-页" class="headerlink" title="新建关于我 about 页"></a>新建关于我 about 页</h4><p><code>about</code> 页是用来展示<strong>关于我和我的博客</strong>信息的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>about/index.md</code> 文件，那么你就需要新建一个，命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"about"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>编辑你刚刚新建的页面文件 <code>/source/about/index.md</code>，至少需要以下内容：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> about
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-09-30 17:25:30</span>
<span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"about"</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"about"</span>
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="新建留言板-contact-页（可选的）"><a href="#新建留言板-contact-页（可选的）" class="headerlink" title="新建留言板 contact 页（可选的）"></a>新建留言板 contact 页（可选的）</h4><p><code>contact</code> 页是用来展示<strong>留言板</strong>信息的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>contact/index.md</code> 文件，那么你就需要新建一个，命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"contact"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>编辑你刚刚新建的页面文件 <code>/source/contact/index.md</code>，至少需要以下内容：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> contact
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-09-30 17:25:30</span>
<span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"contact"</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"contact"</span>
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p><strong>注</strong>：本留言板功能依赖于第三方评论系统，请<strong>激活</strong>你的评论系统才有效果。并且在主题的 <code>_config.yml</code> 文件中，第 <code>19</code> 至 <code>21</code> 行的“<strong>菜单</strong>”配置，取消关于留言板的注释即可。</p>
</blockquote>
<h4 id="新建友情链接-friends-页（可选的）"><a href="#新建友情链接-friends-页（可选的）" class="headerlink" title="新建友情链接 friends 页（可选的）"></a>新建友情链接 friends 页（可选的）</h4><p><code>friends</code> 页是用来展示<strong>友情链接</strong>信息的页面，如果在你的博客 <code>source</code> 目录下还没有 <code>friends/index.md</code> 文件，那么你就需要新建一个，命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token string">"friends"</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>编辑你刚刚新建的页面文件 <code>/source/friends/index.md</code>，至少需要以下内容：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> friends
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-09-12 21:25:30</span>
<span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"friends"</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"friends"</span>
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>同时，在你的博客 <code>source</code> 目录下新建 <code>_data</code> 目录，在 <code>_data</code> 目录中新建 <code>friends.json</code> 文件，文件内容如下所示：</p>
<pre class="line-numbers language-json" data-language="json"><code class="language-json"><span class="token punctuation">[</span><span class="token punctuation">&#123;</span>
    <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"https://img-blog.csdnimg.cn/20200401094829557.jpg"</span><span class="token punctuation">,</span>
    <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"郭霖的专栏"</span><span class="token punctuation">,</span>
    <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"每当你在感叹，如果有这样一个东西就好了的时候，请注意，其实这是你的机会"</span><span class="token punctuation">,</span>
    <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://guolin.blog.csdn.net/"</span><span class="token punctuation">,</span>
    <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去学习"</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span>
    <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"http://liuwangshu.cn/img/my.jpg"</span><span class="token punctuation">,</span>
    <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"刘望舒"</span><span class="token punctuation">,</span>
    <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"Android进阶三部曲系列图书作者、腾讯云TVP、前华为技术专家"</span><span class="token punctuation">,</span>
    <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"http://liuwangshu.cn/system.html"</span><span class="token punctuation">,</span>
    <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去学习"</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span>
    <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"https://pic1.zhimg.com/v2-fbfbfc97fee159541dd5a7ec4579a83c_xl.jpg"</span><span class="token punctuation">,</span>
    <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"扔物线"</span><span class="token punctuation">,</span>
    <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"Google认证开发专家，Compose、Kotlin、自定义View系列教程"</span><span class="token punctuation">,</span>
    <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://rengwuxian.com/"</span><span class="token punctuation">,</span>
    <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去学习"</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">,</span><span class="token punctuation">&#123;</span>
    <span class="token property">"avatar"</span><span class="token operator">:</span> <span class="token string">"https://blinkfox.github.io/medias/avatar.jpg"</span><span class="token punctuation">,</span>
    <span class="token property">"name"</span><span class="token operator">:</span> <span class="token string">"闪烁之狐"</span><span class="token punctuation">,</span>
    <span class="token property">"introduction"</span><span class="token operator">:</span> <span class="token string">"编程界大佬，技术牛，人还特别好，不懂的都可以请教大佬"</span><span class="token punctuation">,</span>
    <span class="token property">"url"</span><span class="token operator">:</span> <span class="token string">"https://blinkfox.github.io/"</span><span class="token punctuation">,</span>
    <span class="token property">"title"</span><span class="token operator">:</span> <span class="token string">"前去探索"</span>
<span class="token punctuation">&#125;</span><span class="token punctuation">]</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="新建-404-页"><a href="#新建-404-页" class="headerlink" title="新建 404 页"></a>新建 404 页</h4><p>如果在你的博客 <code>source</code> 目录下还没有 <code>404.md</code> 文件，那么你就需要新建一个</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash">hexo new page <span class="token number">404</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>编辑你刚刚新建的页面文件 <code>/source/404/index.md</code>，至少需要以下内容：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> <span class="token number">404</span>
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-09-30 17:25:30</span>
<span class="token key atrule">type</span><span class="token punctuation">:</span> <span class="token string">"404"</span>
<span class="token key atrule">layout</span><span class="token punctuation">:</span> <span class="token string">"404"</span>
<span class="token key atrule">description</span><span class="token punctuation">:</span> <span class="token string">"Oops～，我崩溃了！找不到你想要的页面 :("</span>
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="配置基本菜单导航的名称、路径url和图标icon"><a href="#配置基本菜单导航的名称、路径url和图标icon" class="headerlink" title="配置基本菜单导航的名称、路径url和图标icon."></a>配置基本菜单导航的名称、路径url和图标icon.</h4><p>1.菜单导航名称可以是中文也可以是英文(如：<code>Index</code>或<code>主页</code>)<br>2.图标icon 可以在<a target="_blank" rel="noopener" href="https://fontawesome.com/icons">Font Awesome</a> 中查找   </p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">menu</span><span class="token punctuation">:</span>
  <span class="token key atrule">Index</span><span class="token punctuation">:</span>
    <span class="token key atrule">url</span><span class="token punctuation">:</span> /
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>home
  <span class="token key atrule">Tags</span><span class="token punctuation">:</span>
    <span class="token key atrule">url</span><span class="token punctuation">:</span> /tags
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>tags
  <span class="token key atrule">Categories</span><span class="token punctuation">:</span>
    <span class="token key atrule">url</span><span class="token punctuation">:</span> /categories
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>bookmark
  <span class="token key atrule">Archives</span><span class="token punctuation">:</span>
    <span class="token key atrule">url</span><span class="token punctuation">:</span> /archives
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>archive
  <span class="token key atrule">About</span><span class="token punctuation">:</span>
    <span class="token key atrule">url</span><span class="token punctuation">:</span> /about
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>user<span class="token punctuation">-</span>circle
  <span class="token key atrule">Friends</span><span class="token punctuation">:</span>
    <span class="token key atrule">url</span><span class="token punctuation">:</span> /friends
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>address<span class="token punctuation">-</span>book<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="二级菜单配置方法"><a href="#二级菜单配置方法" class="headerlink" title="二级菜单配置方法"></a>二级菜单配置方法</h4><p>如果你需要二级菜单则可以在原基本菜单导航的基础上如下操作</p>
<ol>
<li>在需要添加二级菜单的一级菜单下添加<code>children</code>关键字(如:<code>About</code>菜单下添加<code>children</code>)     </li>
<li>在<code>children</code>下创建二级菜单的 名称name,路径url和图标icon.      </li>
<li>注意每个二级菜单模块前要加 <code>-</code>.     </li>
<li>注意缩进格式  </li>
</ol>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">menu</span><span class="token punctuation">:</span>
  <span class="token key atrule">Index</span><span class="token punctuation">:</span>
    <span class="token key atrule">url</span><span class="token punctuation">:</span> /
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>home
  <span class="token punctuation">...</span>
  <span class="token key atrule">Medias</span><span class="token punctuation">:</span>
    <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>list
    <span class="token key atrule">children</span><span class="token punctuation">:</span>
      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Music
        <span class="token key atrule">url</span><span class="token punctuation">:</span> /music
        <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>music
      <span class="token punctuation">-</span> <span class="token key atrule">name</span><span class="token punctuation">:</span> Movies
        <span class="token key atrule">url</span><span class="token punctuation">:</span> /movies
        <span class="token key atrule">icon</span><span class="token punctuation">:</span> fas fa<span class="token punctuation">-</span>film<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="搜索"><a href="#搜索" class="headerlink" title="搜索"></a>搜索</h4><p>本主题中还使用到了 <a target="_blank" rel="noopener" href="https://github.com/wzpan/hexo-generator-search">hexo-generator-search</a> 的 Hexo 插件来做内容搜索，安装命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> <span class="token function">install</span> hexo-generator-search --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">search</span><span class="token punctuation">:</span>
  <span class="token key atrule">path</span><span class="token punctuation">:</span> search.xml
  <span class="token key atrule">field</span><span class="token punctuation">:</span> post<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>



<h4 id="中文链接转拼音"><a href="#中文链接转拼音" class="headerlink" title="中文链接转拼音"></a>中文链接转拼音</h4><p>如果你的文章名称是中文的，那么 Hexo 默认生成的永久链接也会有中文，这样不利于 <code>SEO</code>，且 <code>gitment</code> 评论对中文链接也不支持。我们可以用 <a target="_blank" rel="noopener" href="https://github.com/viko16/hexo-permalink-pinyin">hexo-permalink-pinyin</a> Hexo 插件使在生成文章时生成中文拼音的永久链接。</p>
<p>安装命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> i hexo-permalink-pinyin --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>在 Hexo 根目录下的 <code>_config.yml</code> 文件中，新增以下的配置项：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">permalink_pinyin</span><span class="token punctuation">:</span>
  <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">separator</span><span class="token punctuation">:</span> <span class="token string">'-'</span> <span class="token comment"># default: '-'</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p><strong>注</strong>：除了此插件外，<a target="_blank" rel="noopener" href="https://github.com/rozbo/hexo-abbrlink">hexo-abbrlink</a> 插件也可以生成非中文的链接。</p>
</blockquote>
<h4 id="文章字数统计插件"><a href="#文章字数统计插件" class="headerlink" title="文章字数统计插件"></a>文章字数统计插件</h4><p>如果你想要在文章中显示文章字数、阅读时长信息，可以安装 <a target="_blank" rel="noopener" href="https://github.com/willin/hexo-wordcount">hexo-wordcount</a>插件。</p>
<p>安装命令如下：</p>
<pre class="line-numbers language-bash" data-language="bash"><code class="language-bash"><span class="token function">npm</span> i --save hexo-wordcount<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>然后只需在本主题下的 <code>_config.yml</code> 文件中，将各个文章字数相关的配置激活即可：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">postInfo</span><span class="token punctuation">:</span>
  <span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">update</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
  <span class="token key atrule">wordCount</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 设置文章字数统计为 true.</span>
  <span class="token key atrule">totalCount</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 设置站点文章总字数统计为 true.</span>
  <span class="token key atrule">min2read</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 阅读时长.</span>
  <span class="token key atrule">readCount</span><span class="token punctuation">:</span> <span class="token boolean important">false</span> <span class="token comment"># 阅读次数.</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="访问量和访问人次统计"><a href="#访问量和访问人次统计" class="headerlink" title="访问量和访问人次统计"></a>访问量和访问人次统计</h4><p>在网站页脚位置显示不蒜子访问人数统计，只需修改主题下的 <code>_config.yml</code>的这些属性就可以了。</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># 不蒜子(http://busuanzi.ibruce.info/) 网站统计</span>
<span class="token key atrule">busuanziStatistics</span><span class="token punctuation">:</span>
  <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">totalTraffic</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token comment"># 总访问量</span>
  <span class="token key atrule">totalNumberOfvisitors</span><span class="token punctuation">:</span> <span class="token boolean important">true</span> <span class="token comment"># 总人次</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="修改页脚"><a href="#修改页脚" class="headerlink" title="修改页脚"></a>修改页脚</h4><p>页脚信息可能需要做定制化修改，而且它不便于做成配置信息，所以可能需要你自己去再修改和加工。修改的地方在主题文件的 <code>/layout/_partial/footer.ejs</code> 文件中，包括站点、使用的主题、访问量等。</p>
<h4 id="修改打赏的二维码图片"><a href="#修改打赏的二维码图片" class="headerlink" title="修改打赏的二维码图片"></a>修改打赏的二维码图片</h4><p>在主题文件的 <code>source/medias/reward</code> 文件中，你可以替换成你的的微信和支付宝的打赏二维码图片。</p>
<h4 id="修改网页标签图标和网站logo"><a href="#修改网页标签图标和网站logo" class="headerlink" title="修改网页标签图标和网站logo"></a>修改网页标签图标和网站logo</h4><pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token key atrule">favicon</span><span class="token punctuation">:</span> /favicon.png
<span class="token key atrule">logo</span><span class="token punctuation">:</span> /medias/logo.png<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>



<h4 id="修改主题颜色"><a href="#修改主题颜色" class="headerlink" title="修改主题颜色"></a>修改主题颜色</h4><p>在主题文件的 <code>/source/css/matery.css</code> 文件中，搜索 <code>.bg-color</code> 来修改背景颜色：</p>
<pre class="line-numbers language-css" data-language="css"><code class="language-css"><span class="token comment">/* 整体背景颜色，包括导航、移动端的导航、页尾、标签页等的背景颜色. */</span>
<span class="token selector">.bg-color</span> <span class="token punctuation">&#123;</span>
    <span class="token property">background-image</span><span class="token punctuation">:</span> <span class="token function">linear-gradient</span><span class="token punctuation">(</span>to right<span class="token punctuation">,</span> #4cbf30 0%<span class="token punctuation">,</span> #0f9d58 100%<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">&#125;</span>

<span class="token atrule"><span class="token rule">@-webkit-keyframes</span> rainbow</span> <span class="token punctuation">&#123;</span>
   <span class="token comment">/* 动态切换背景颜色. */</span>
<span class="token punctuation">&#125;</span>

<span class="token atrule"><span class="token rule">@keyframes</span> rainbow</span> <span class="token punctuation">&#123;</span>
    <span class="token comment">/* 动态切换背景颜色. */</span>
<span class="token punctuation">&#125;</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h4 id="修改-banner-图和文章特色图"><a href="#修改-banner-图和文章特色图" class="headerlink" title="修改 banner 图和文章特色图"></a>修改 banner 图和文章特色图</h4><p>你可以直接在 <code>/source/medias/banner</code> 文件夹中更换你喜欢的 <code>banner</code> 图片，主题代码中是每天动态切换一张，只需 <code>7</code> 张即可。如果你会 <code>JavaScript</code> 代码，可以修改成你自己喜欢切换逻辑，如：随机切换等，<code>banner</code> 切换的代码位置在 <code>/layout/_partial/bg-cover-content.ejs</code> 文件的 <code>&lt;script&gt;&lt;/script&gt;</code> 代码中：</p>
<pre class="line-numbers language-javascript" data-language="javascript"><code class="language-javascript"><span class="token function">$</span><span class="token punctuation">(</span><span class="token string">'.bg-cover'</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">css</span><span class="token punctuation">(</span><span class="token string">'background-image'</span><span class="token punctuation">,</span> <span class="token string">'url(/medias/banner/'</span> <span class="token operator">+</span> <span class="token keyword">new</span> <span class="token class-name">Date</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">.</span><span class="token function">getDay</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">+</span> <span class="token string">'.jpg)'</span><span class="token punctuation">)</span><span class="token punctuation">;</span><span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>在 <code>/source/medias/featureimages</code> 文件夹中默认有 24 张特色图片，你可以再增加或者减少，并需要在 <code>_config.yml</code> 做同步修改。</p>
<h4 id="配置音乐播放器（可选的）"><a href="#配置音乐播放器（可选的）" class="headerlink" title="配置音乐播放器（可选的）"></a>配置音乐播放器（可选的）</h4><p>要支持音乐播放，在主题的 <code>_config.yml</code> 配置文件中激活music配置即可：</p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token comment"># 是否在首页显示音乐</span>
<span class="token key atrule">music</span><span class="token punctuation">:</span>
  <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
  <span class="token key atrule">title</span><span class="token punctuation">:</span>     	    <span class="token comment"># 非吸底模式有效</span>
    <span class="token key atrule">enable</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
    <span class="token key atrule">show</span><span class="token punctuation">:</span> 听听音乐
  <span class="token key atrule">server</span><span class="token punctuation">:</span> netease   <span class="token comment"># require music platform: netease, tencent, kugou, xiami, baidu</span>
  <span class="token key atrule">type</span><span class="token punctuation">:</span> playlist    <span class="token comment"># require song, playlist, album, search, artist</span>
  <span class="token key atrule">id</span><span class="token punctuation">:</span> <span class="token number">503838841</span>     <span class="token comment"># require song id / playlist id / album id / search keyword</span>
  <span class="token key atrule">fixed</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>      <span class="token comment"># 开启吸底模式</span>
  <span class="token key atrule">autoplay</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>   <span class="token comment"># 是否自动播放</span>
  <span class="token key atrule">theme</span><span class="token punctuation">:</span> <span class="token string">'#42b983'</span>
  <span class="token key atrule">loop</span><span class="token punctuation">:</span> <span class="token string">'all'</span>       <span class="token comment"># 音频循环播放, 可选值: 'all', 'one', 'none'</span>
  <span class="token key atrule">order</span><span class="token punctuation">:</span> <span class="token string">'random'</span>   <span class="token comment"># 音频循环顺序, 可选值: 'list', 'random'</span>
  <span class="token key atrule">preload</span><span class="token punctuation">:</span> <span class="token string">'auto'</span>   <span class="token comment"># 预加载，可选值: 'none', 'metadata', 'auto'</span>
  <span class="token key atrule">volume</span><span class="token punctuation">:</span> <span class="token number">0.7</span>       <span class="token comment"># 默认音量，请注意播放器会记忆用户设置，用户手动设置音量后默认音量即失效</span>
  <span class="token key atrule">listFolded</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>  <span class="token comment"># 列表默认折叠</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<blockquote>
<p><code>server</code>可选<code>netease</code>（网易云音乐），<code>tencent</code>（QQ音乐），<code>kugou</code>（酷狗音乐），<code>xiami</code>（虾米音乐），</p>
<p><code>baidu</code>（百度音乐）。</p>
<p><code>type</code>可选<code>song</code>（歌曲），<code>playlist</code>（歌单），<code>album</code>（专辑），<code>search</code>（搜索关键字），<code>artist</code>（歌手）</p>
<p><code>id</code>获取方法示例: 浏览器打开网易云音乐，点击我喜欢的音乐歌单，浏览器地址栏后面会有一串数字，<code>playlist</code>的<code>id</code></p>
<p>即为这串数字。</p>
</blockquote>
<h3 id="文章-Front-matter-介绍"><a href="#文章-Front-matter-介绍" class="headerlink" title="文章 Front-matter 介绍"></a>文章 Front-matter 介绍</h3><p><code>Front-matter</code> 选项中的所有内容均为<strong>非必填</strong>的。但我仍然建议至少填写 <code>title</code> 和 <code>date</code> 的值。</p>
<table>
<thead>
<tr>
<th>配置选项</th>
<th>默认值</th>
<th>描述</th>
</tr>
</thead>
<tbody><tr>
<td>title</td>
<td><code>Markdown</code> 的文件标题</td>
<td>文章标题，强烈建议填写此选项</td>
</tr>
<tr>
<td>date</td>
<td>文件创建时的日期时间</td>
<td>发布时间，强烈建议填写此选项，且最好保证全局唯一</td>
</tr>
<tr>
<td>author</td>
<td>根 <code>_config.yml</code> 中的 <code>author</code></td>
<td>文章作者</td>
</tr>
<tr>
<td>img</td>
<td><code>featureImages</code> 中的某个值</td>
<td>文章特征图，推荐使用图床(腾讯云、七牛云、又拍云等)来做图片的路径.如: <code>http://xxx.com/xxx.jpg</code></td>
</tr>
<tr>
<td>top</td>
<td><code>true</code></td>
<td>推荐文章（文章是否置顶），如果 <code>top</code> 值为 <code>true</code>，则会作为首页推荐文章</td>
</tr>
<tr>
<td>hide</td>
<td><code>false</code></td>
<td>隐藏文章，如果<code>hide</code>值为<code>true</code>，则文章不会在首页显示</td>
</tr>
<tr>
<td>cover</td>
<td><code>false</code></td>
<td><code>v1.0.2</code>版本新增，表示该文章是否需要加入到首页轮播封面中</td>
</tr>
<tr>
<td>coverImg</td>
<td>无</td>
<td><code>v1.0.2</code>版本新增，表示该文章在首页轮播封面需要显示的图片路径，如果没有，则默认使用文章的特色图片</td>
</tr>
<tr>
<td>password</td>
<td>无</td>
<td>文章阅读密码，如果要对文章设置阅读验证密码的话，就可以设置 <code>password</code> 的值，该值必须是用 <code>SHA256</code> 加密后的密码，防止被他人识破。前提是在主题的 <code>config.yml</code> 中激活了 <code>verifyPassword</code> 选项</td>
</tr>
<tr>
<td>toc</td>
<td><code>true</code></td>
<td>是否开启 TOC，可以针对某篇文章单独关闭 TOC 的功能。前提是在主题的 <code>config.yml</code> 中激活了 <code>toc</code> 选项</td>
</tr>
<tr>
<td>mathjax</td>
<td><code>false</code></td>
<td>是否开启数学公式支持 ，本文章是否开启 <code>mathjax</code>，且需要在主题的 <code>_config.yml</code> 文件中也需要开启才行</td>
</tr>
<tr>
<td>summary</td>
<td>无</td>
<td>文章摘要，自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要</td>
</tr>
<tr>
<td>categories</td>
<td>无</td>
<td>文章分类，本主题的分类表示宏观上大的分类，只建议一篇文章一个分类</td>
</tr>
<tr>
<td>tags</td>
<td>无</td>
<td>文章标签，一篇文章可以多个标签</td>
</tr>
<tr>
<td>keywords</td>
<td>文章标题</td>
<td>文章关键字，SEO 时需要</td>
</tr>
<tr>
<td>reprintPolicy</td>
<td>cc_by</td>
<td>文章转载规则， 可以是 cc_by, cc_by_nd, cc_by_sa, cc_by_nc, cc_by_nc_nd, cc_by_nc_sa, cc0, noreprint 或 pay 中的一个</td>
</tr>
</tbody></table>
<blockquote>
<p><strong>注意</strong>:</p>
<ol>
<li>如果 <code>img</code> 属性不填写的话，文章特色图会根据文章标题的 <code>hashcode</code> 的值取余，然后选取主题中对应的特色图片，从而达到让所有文章的特色图<strong>各有特色</strong>。</li>
<li><code>date</code> 的值尽量保证每篇文章是唯一的，因为本主题中 <code>Gitalk</code> 和 <code>Gitment</code> 识别 <code>id</code> 是通过 <code>date</code> 的值来作为唯一标识的。</li>
<li>如果要对文章设置阅读验证密码的功能，不仅要在 Front-matter 中设置采用了 SHA256 加密的 password 的值，还需要在主题的 <code>_config.yml</code> 中激活了配置。有些在线的 SHA256 加密的地址，可供你使用：<a target="_blank" rel="noopener" href="http://tool.oschina.net/encrypt?type=2">开源中国在线工具</a>、<a target="_blank" rel="noopener" href="http://encode.chahuo.com/">chahuo</a>、<a target="_blank" rel="noopener" href="http://tool.chinaz.com/tools/hash.aspx">站长工具</a>。</li>
<li>您可以在文章md文件的 front-matter 中指定 reprintPolicy 来给单个文章配置转载规则</li>
</ol>
</blockquote>
<p><strong>最简示例</strong></p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> typora<span class="token punctuation">-</span>vue<span class="token punctuation">-</span>theme主题介绍
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-07 09:25:00</span>
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span></span></code></pre>

<p><strong>最全示例</strong></p>
<pre class="line-numbers language-yaml" data-language="yaml"><code class="language-yaml"><span class="token punctuation">---</span>
<span class="token key atrule">title</span><span class="token punctuation">:</span> typora<span class="token punctuation">-</span>vue<span class="token punctuation">-</span>theme主题介绍
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2018-09-07 09:25:00</span>
<span class="token key atrule">author</span><span class="token punctuation">:</span> 赵奇
<span class="token key atrule">img</span><span class="token punctuation">:</span> /source/images/xxx.jpg
<span class="token key atrule">top</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">hide</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token key atrule">cover</span><span class="token punctuation">:</span> <span class="token boolean important">true</span>
<span class="token key atrule">coverImg</span><span class="token punctuation">:</span> /images/1.jpg
<span class="token key atrule">password</span><span class="token punctuation">:</span> 8d969eef6ecad3c29a3a629280e686cf0c3f5d5a86aff3ca12020c923adc6c92
<span class="token key atrule">toc</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token key atrule">mathjax</span><span class="token punctuation">:</span> <span class="token boolean important">false</span>
<span class="token key atrule">summary</span><span class="token punctuation">:</span> 这是你自定义的文章摘要内容，如果这个属性有值，文章卡片摘要就显示这段文字，否则程序会自动截取文章的部分内容作为摘要
<span class="token key atrule">categories</span><span class="token punctuation">:</span> Markdown
<span class="token key atrule">tags</span><span class="token punctuation">:</span>
  <span class="token punctuation">-</span> Typora
  <span class="token punctuation">-</span> Markdown
<span class="token punctuation">---</span><span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>



<h3 id="为文章添加评论功能"><a href="#为文章添加评论功能" class="headerlink" title="为文章添加评论功能"></a>为文章添加评论功能</h3><p>Hexo评论模块的配置有很多种方式，这里推荐一个<a target="_blank" rel="noopener" href="https://www.livere.com/apply">livere</a> ，是韩国的一个评论系统，支持免费和收费2中模式，一般个人博客使用免费版本就可以了。</p>
<p>首先需要注册一个账号并登录，然后安装免费版本（City版），</p>
<p><img src="/blog/HexoBlogBuildAndConfig/LivereInstall.jpg" alt="LivereInstall"></p>
<p>点击现在安装然后填写相关信息就可以看到一个配置js代码了，我们这里只需要使用代码里面的uid就可以了。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/livere.jpg" alt="livere"></p>
<p>拿到uid之后，我们需要配置一下我们的themes目录下面的_config.yml文件中的livere信息就好了，我使用的主题是hexo-theme-matery，配置如下：</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell">livere:
  enable: <span class="token boolean">true</span>
  uid: 刚刚拿到的uid<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span></span></code></pre>

<p>最后执行<code>hexo g</code> 和 <code>hexo d</code>命令来成本网页并发布就可以看到每篇文章后面出现来必力评论模块了。</p>
<h3 id="安装本地图片插件"><a href="#安装本地图片插件" class="headerlink" title="安装本地图片插件"></a>安装本地图片插件</h3><p>在Markdown语法中显示一张图片，需要这张图片的链接地址，如果是本地使用，则直接使用本地图片的绝对路径就可以了，而如果生成静态网页就需要先把图片上传到服务器获取图片链接，市面上有一些免费的图片服务器，你也可以购买自己的服务器专门来管理图片，其实我们可以为Hexo安装一个插件<a target="_blank" rel="noopener" href="https://github.com/CodeFalling/hexo-asset-image">hexo-asset-image</a> 把本地图片直接发布到托管平台，然后生成图片链接。</p>
<p>首先需要安装hexo-asset-image插件：</p>
<pre class="line-numbers language-shell" data-language="shell"><code class="language-shell"><span class="token function">npm</span> <span class="token function">install</span> https://github.com/CodeFalling/hexo-asset-image --save<span aria-hidden="true" class="line-numbers-rows"><span></span></span></code></pre>

<p>然后我们新建一篇文章“HexoImageExample”的时候，会在<code>_posts</code> 目录下面同时生成一个以“HexoImageExample”命名的文件夹以及一个HexoImageExample.md文件，这个文件夹就是用来存放图片的。</p>
<p>我们打开HexoImageExample.md文件，使用下面的语法来定义图片及显示图片：</p>
<pre class="line-numbers language-markdown" data-language="markdown"><code class="language-markdown"><span class="token front-matter-block"><span class="token punctuation">---</span>
<span class="token font-matter yaml language-yaml"><span class="token key atrule">title</span><span class="token punctuation">:</span> HexoImageExample
<span class="token key atrule">date</span><span class="token punctuation">:</span> <span class="token datetime number">2021-10-13 14:41:03</span></span>
<span class="token punctuation">---</span></span>

// 定义图片
<span class="token url-reference url"><span class="token punctuation">[</span><span class="token variable">image</span><span class="token punctuation">]</span><span class="token punctuation">:</span> ./HexoImageExample/image.jpg	<span class="token string">"ImageTitle"</span></span>
<span class="token url-reference url"><span class="token punctuation">[</span><span class="token variable">image2</span><span class="token punctuation">]</span><span class="token punctuation">:</span> ./HexoImageExample/image2.jpg</span>

// 显示图片
![image]

// 或者直接使用下面这种常规方式显示
![image3]( ./HexoImageExample/image3.jpg)<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span><span></span></span></code></pre>

<p>这里需要注意的是图片的路径需要加上<code>./HexoImageExample</code></p>
<p>最后改一下配置文件<code>_config.yml</code>里面的<code>post_asset_folder</code>属性值，改成<code>true</code>。</p>
<p>最后直接执行<code>hexo g</code> 和 <code>hexo d</code>命令来成本网页并发布就可以了。</p>
<blockquote>
<p> 参考链接：<a target="_blank" rel="noopener" href="https://blog.csdn.net/sinat_37781304/article/details/82729029">https://blog.csdn.net/sinat_37781304/article/details/82729029</a></p>
</blockquote>
<h3 id="SEO优化"><a href="#SEO优化" class="headerlink" title="SEO优化"></a>SEO优化</h3><p>推广是很麻烦的事情，怎么样别人才能知道我们呢，首先需要让搜索引擎收录你的这个网站，别人才能搜索的到。那么这就需要SEO优化了。</p>
<blockquote>
<p>SEO是由英文Search Engine Optimization缩写而来， 中文意译为“搜索引擎优化”。SEO是指通过站内优化比如网站结构调整、网站内容建设、网站代码优化等以及站外优化。</p>
</blockquote>
<p>刚建站的时候是没有搜索引擎收录我们的网站的。可以在如在百度搜索引擎中输入<code>site:域名</code>来查看一下。</p>
<p><img src="/blog/HexoBlogBuildAndConfig/site.jpg" alt="Hexo配置文件"></p>
<p><strong>百度seo</strong></p>
<ol>
<li>登录百度站长平台添加网站</li>
</ol>
<p>登录<a target="_blank" rel="noopener" href="https://ziyuan.baidu.com/linksubmit/index">百度站长平台</a>，在站点管理中添加你自己的网站。</p>
<p>验证网站有三种方式：文件验证、HTML标签验证、CNAME验证。</p>
<p>第三种方式最简单，只要将它提供给你的那个xxxxx使用CNAME解析到xxx.baidu.com就可以了。也就是前面购买域名的时候，进行DNS解析的地方再添加一条CNAME记录。</p>
<ol start="2">
<li>提交链接</li>
</ol>
<p>我们需要使用npm自动生成网站的sitemap，然后将生成的sitemap提交到百度和其他搜索引擎</p>
<pre class="line-numbers language-none"><code class="language-none">npm install hexo-generator-sitemap --save     
npm install hexo-generator-baidu-sitemap --save<span aria-hidden="true" class="line-numbers-rows"><span></span><span></span></span></code></pre>


<p>这时候你需要在你的根目录下_config.xml中看看url有没有改成你自己购买的域名：</p>
<p>重新部署后，就可以在public文件夹下看到生成的sitemap.xml和baidusitemap.xml了。</p>
<p>然后就可以向百度提交你的站点地图了。</p>
<p>这里建议使用自动提交。</p>
<p>自动提交又分为三种：主动推送、自动推送、sitemap。</p>
<p>可以三个一起提交不要紧。</p>
<p>自动推送：把百度生成的自动推送代码，放在主题文件/layout/common/head.ejs的适当位置，然后验证一下就可以了。<br>sitemap：把两个sitemap地址，提交上去，看到状态正常就OK了。</p>
<p>百度收录比较慢，慢慢等个十天半个月再去<code>site:域名</code>看看有没有被收录。</p>
<p><strong>Google的SEO</strong><br>流程一样，Google更简单，而且收录更快，进入<a target="_blank" rel="noopener" href="https://search.google.com/search-console/sitemaps?resource_id=http://fangzh.top/&hl=zh-CN">Google站点地图</a>，提交网站和sitemap.xml，就可以了。如果你这个域名在Google这里出了问题，那你就提交 yourname.github.io，这个链接，效果是一样的。不出意外的话一天内Google就能收录你的网站了。不过Google站点平台需要VPN才能进去。</p>
<p>其他的搜索平台，如搜狗搜索，360搜索，流程是一样的。</p>
<h3 id="结语"><a href="#结语" class="headerlink" title="结语"></a>结语</h3><p>好了，到这里整个Hexo搭建博客的流程就结束了，相信你也搭建了一个属于你自己的博客！如有任何问题，欢迎在下面评论留言！</p>
<p>下面就是我的博客： <a href="https://xiayunquan.gitee.io/blog">https://xiayunquan.gitee.io/blog</a></p>

                
            </div>
            <hr/>

            



            <div class="tag_share" style="display: block;">
                <div class="post-meta__tag-list" style="display: inline-block;">
                    
                        <div class="article-tag">
                            
                                <a href="/blog/tags/%E7%8E%AF%E5%A2%83%E6%90%AD%E5%BB%BA/">
                                    <span class="chip bg-color">环境搭建</span>
                                </a>
                            
                        </div>
                    
                </div>
                <div class="post_share" style="zoom: 80%; width: fit-content; display: inline-block; float: right; margin: -0.15rem 0;">
                    <link rel="stylesheet" type="text/css" href="/blog/libs/share/css/share.min.css">
<div id="article-share">

    
    <div class="social-share" data-sites="wechat,qq,facebook,google,weibo" data-wechat-qrcode-helper="<p>微信扫一扫即可分享！</p>"></div>
    <script src="/blog/libs/share/js/social-share.min.js"></script>
    

    

</div>

                </div>
            </div>
            
                <style>
    #reward {
        margin: 40px 0;
        text-align: center;
    }

    #reward .reward-link {
        font-size: 1.4rem;
        line-height: 38px;
    }

    #reward .btn-floating:hover {
        box-shadow: 0 6px 12px rgba(0, 0, 0, 0.2), 0 5px 15px rgba(0, 0, 0, 0.2);
    }

    #rewardModal {
        width: 320px;
        height: 350px;
    }

    #rewardModal .reward-title {
        margin: 15px auto;
        padding-bottom: 5px;
    }

    #rewardModal .modal-content {
        padding: 10px;
    }

    #rewardModal .close {
        position: absolute;
        right: 15px;
        top: 15px;
        color: rgba(0, 0, 0, 0.5);
        font-size: 1.3rem;
        line-height: 20px;
        cursor: pointer;
    }

    #rewardModal .close:hover {
        color: #ef5350;
        transform: scale(1.3);
        -moz-transform:scale(1.3);
        -webkit-transform:scale(1.3);
        -o-transform:scale(1.3);
    }

    #rewardModal .reward-tabs {
        margin: 0 auto;
        width: 210px;
    }

    .reward-tabs .tabs {
        height: 38px;
        margin: 10px auto;
        padding-left: 0;
    }

    .reward-content ul {
        padding-left: 0 !important;
    }

    .reward-tabs .tabs .tab {
        height: 38px;
        line-height: 38px;
    }

    .reward-tabs .tab a {
        color: #fff;
        background-color: #ccc;
    }

    .reward-tabs .tab a:hover {
        background-color: #ccc;
        color: #fff;
    }

    .reward-tabs .wechat-tab .active {
        color: #fff !important;
        background-color: #22AB38 !important;
    }

    .reward-tabs .alipay-tab .active {
        color: #fff !important;
        background-color: #019FE8 !important;
    }

    .reward-tabs .reward-img {
        width: 210px;
        height: 210px;
    }
</style>

<div id="reward">
    <a href="#rewardModal" class="reward-link modal-trigger btn-floating btn-medium waves-effect waves-light red">赏</a>

    <!-- Modal Structure -->
    <div id="rewardModal" class="modal">
        <div class="modal-content">
            <a class="close modal-close"><i class="fas fa-times"></i></a>
            <h4 class="reward-title">你的赏识是我前进的动力</h4>
            <div class="reward-content">
                <div class="reward-tabs">
                    <ul class="tabs row">
                        <li class="tab col s6 alipay-tab waves-effect waves-light"><a href="#alipay">支付宝</a></li>
                        <li class="tab col s6 wechat-tab waves-effect waves-light"><a href="#wechat">微 信</a></li>
                    </ul>
                    <div id="alipay">
                        <img src="/blog/medias/reward/alipay.jpg" class="reward-img" alt="支付宝打赏二维码">
                    </div>
                    <div id="wechat">
                        <img src="/blog/medias/reward/wechat.png" class="reward-img" alt="微信打赏二维码">
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    $(function () {
        $('.tabs').tabs();
    });
</script>

            
        </div>
    </div>

    

    

    

    
    <div class="livere-card card" data-aos="fade-up">
    <!-- 来必力City版安装代码 -->
    <div id="lv-container" class="card-content" data-id="city" data-uid="MTAyMC81NDQ2OS8zMDk0MA==">
        <script type="text/javascript">
            (function (d, s) {
                let j, e = d.getElementsByTagName(s)[0];
                if (typeof LivereTower === 'function') {
                    return;
                }

                j = d.createElement(s);
                j.src = 'https://cdn-city.livere.com/js/embed.dist.js';
                j.async = true;

                e.parentNode.insertBefore(j, e);
            })(document, 'script');
        </script>
        <noscript>为正常使用来必力评论功能请激活JavaScript。</noscript>
    </div>
    <!-- City版安装代码已完成 -->
</div>
    

    

    

    

    

    

<article id="prenext-posts" class="prev-next articles">
    <div class="row article-row">
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge left-badge text-color">
                <i class="fas fa-chevron-left"></i>&nbsp;上一篇</div>
            <div class="card">
                <a href="/blog/StatusBar/">
                    <div class="card-image">
                        
                        
                        <img src="/blog/medias/featureimages/24.png" class="responsive-img" alt="状态栏相关知识">
                        
                        <span class="card-title">状态栏相关知识</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                        <span class="publish-date">
                            <i class="far fa-clock fa-fw icon-date"></i>2023-02-24
                        </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/blog/categories/Android/" class="post-category">
                                    Android
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/blog/tags/%E7%8A%B6%E6%80%81%E6%A0%8F/">
                        <span class="chip bg-color">状态栏</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
        
        <div class="article col s12 m6" data-aos="fade-up">
            <div class="article-badge right-badge text-color">
                下一篇&nbsp;<i class="fas fa-chevron-right"></i>
            </div>
            <div class="card">
                <a href="/blog/JavaKeywords/">
                    <div class="card-image">
                        
                        
                        <img src="/blog/medias/featureimages/25.png" class="responsive-img" alt="Java基础语法-关键字的使用">
                        
                        <span class="card-title">Java基础语法-关键字的使用</span>
                    </div>
                </a>
                <div class="card-content article-content">
                    <div class="summary block-with-text">
                        
                            
                        
                    </div>
                    <div class="publish-info">
                            <span class="publish-date">
                                <i class="far fa-clock fa-fw icon-date"></i>2021-10-13
                            </span>
                        <span class="publish-author">
                            
                            <i class="fas fa-bookmark fa-fw icon-category"></i>
                            
                            <a href="/blog/categories/Java/" class="post-category">
                                    Java
                                </a>
                            
                            
                        </span>
                    </div>
                </div>
                
                <div class="card-action article-tags">
                    
                    <a href="/blog/tags/Java%E5%85%B3%E9%94%AE%E5%AD%97/">
                        <span class="chip bg-color">Java关键字</span>
                    </a>
                    
                </div>
                
            </div>
        </div>
        
    </div>
</article>

</div>



<!-- 代码块功能依赖 -->
<script type="text/javascript" src="/blog/libs/codeBlock/codeBlockFuction.js"></script>

<!-- 代码语言 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeLang.js"></script>


<!-- 代码块复制 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeCopy.js"></script>


<!-- 代码块收缩 -->

<script type="text/javascript" src="/blog/libs/codeBlock/codeShrink.js"></script>


    </div>
    <div id="toc-aside" class="expanded col l3 hide-on-med-and-down">
        <div class="toc-widget card" style="background-color: white;">
            <div class="toc-title"><i class="far fa-list-alt"></i>&nbsp;&nbsp;目录</div>
            <div id="toc-content"></div>
        </div>
    </div>
</div>

<!-- TOC 悬浮按钮. -->

<div id="floating-toc-btn" class="hide-on-med-and-down">
    <a class="btn-floating btn-large bg-color">
        <i class="fas fa-list-ul"></i>
    </a>
</div>


<script src="/blog/libs/tocbot/tocbot.min.js"></script>
<script>
    $(function () {
        tocbot.init({
            tocSelector: '#toc-content',
            contentSelector: '#articleContent',
            headingsOffset: -($(window).height() * 0.4 - 45),
            collapseDepth: Number('3'),
            headingSelector: 'h1, h2, h3, h4'
        });

        // modify the toc link href to support Chinese.
        let i = 0;
        let tocHeading = 'toc-heading-';
        $('#toc-content a').each(function () {
            $(this).attr('href', '#' + tocHeading + (++i));
        });

        // modify the heading title id to support Chinese.
        i = 0;
        $('#articleContent').children('h1, h2, h3, h4').each(function () {
            $(this).attr('id', tocHeading + (++i));
        });

        // Set scroll toc fixed.
        let tocHeight = parseInt($(window).height() * 0.4 - 64);
        let $tocWidget = $('.toc-widget');
        $(window).scroll(function () {
            let scroll = $(window).scrollTop();
            /* add post toc fixed. */
            if (scroll > tocHeight) {
                $tocWidget.addClass('toc-fixed');
            } else {
                $tocWidget.removeClass('toc-fixed');
            }
        });

        
        /* 修复文章卡片 div 的宽度. */
        let fixPostCardWidth = function (srcId, targetId) {
            let srcDiv = $('#' + srcId);
            if (srcDiv.length === 0) {
                return;
            }

            let w = srcDiv.width();
            if (w >= 450) {
                w = w + 21;
            } else if (w >= 350 && w < 450) {
                w = w + 18;
            } else if (w >= 300 && w < 350) {
                w = w + 16;
            } else {
                w = w + 14;
            }
            $('#' + targetId).width(w);
        };

        // 切换TOC目录展开收缩的相关操作.
        const expandedClass = 'expanded';
        let $tocAside = $('#toc-aside');
        let $mainContent = $('#main-content');
        $('#floating-toc-btn .btn-floating').click(function () {
            if ($tocAside.hasClass(expandedClass)) {
                $tocAside.removeClass(expandedClass).hide();
                $mainContent.removeClass('l9');
            } else {
                $tocAside.addClass(expandedClass).show();
                $mainContent.addClass('l9');
            }
            fixPostCardWidth('artDetail', 'prenext-posts');
        });
        
    });
</script>

    

</main>




    <footer class="page-footer bg-color">
    
        <link rel="stylesheet" href="/blog/libs/aplayer/APlayer.min.css">
<style>
    .aplayer .aplayer-lrc p {
        
        display: none;
        
        font-size: 12px;
        font-weight: 700;
        line-height: 16px !important;
    }

    .aplayer .aplayer-lrc p.aplayer-lrc-current {
        
        display: none;
        
        font-size: 15px;
        color: #42b983;
    }

    
    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body {
        left: -66px !important;
    }

    .aplayer.aplayer-fixed.aplayer-narrow .aplayer-body:hover {
        left: 0px !important;
    }

    
</style>
<div class="">
    
    <div class="row">
        <meting-js class="col l8 offset-l2 m10 offset-m1 s12"
                   server="netease"
                   type="playlist"
                   id="2821652960"
                   fixed='true'
                   autoplay='false'
                   theme='#42b983'
                   loop='all'
                   order='random'
                   preload='auto'
                   volume='0.7'
                   list-folded='true'
        >
        </meting-js>
    </div>
</div>

<script src="/blog/libs/aplayer/APlayer.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/meting@2/dist/Meting.min.js"></script>

    

    <div class="container row center-align"
         style="margin-bottom: 15px !important;">
        <div class="col s12 m8 l8 copy-right">
            Copyright&nbsp;&copy;
            
                <span id="year">2021-2024</span>
            
            <a href="/blog/about" target="_blank">Xyq</a>
            |&nbsp;Powered by&nbsp;<a href="https://hexo.io/" target="_blank">Hexo</a>
            |&nbsp;Theme&nbsp;<a href="https://github.com/blinkfox/hexo-theme-matery" target="_blank">Matery</a>
            <br>
            
            
            
                
            
            
                <span id="busuanzi_container_site_pv">
                &nbsp;|&nbsp;<i class="far fa-eye"></i>&nbsp;总访问量:&nbsp;
                    <span id="busuanzi_value_site_pv" class="white-color"></span>
            </span>
            
            
                <span id="busuanzi_container_site_uv">
                &nbsp;|&nbsp;<i class="fas fa-users"></i>&nbsp;总访问人数:&nbsp;
                    <span id="busuanzi_value_site_uv" class="white-color"></span>
            </span>
            
            <br>

            <!-- 运行天数提醒. -->
            
                <span id="sitetime"> Loading ...</span>
                <script>
                    var calcSiteTime = function () {
                        var seconds = 1000;
                        var minutes = seconds * 60;
                        var hours = minutes * 60;
                        var days = hours * 24;
                        var years = days * 365;
                        var today = new Date();
                        var startYear = "2021";
                        var startMonth = "9";
                        var startDate = "23";
                        var startHour = "12";
                        var startMinute = "0";
                        var startSecond = "0";
                        var todayYear = today.getFullYear();
                        var todayMonth = today.getMonth() + 1;
                        var todayDate = today.getDate();
                        var todayHour = today.getHours();
                        var todayMinute = today.getMinutes();
                        var todaySecond = today.getSeconds();
                        var t1 = Date.UTC(startYear, startMonth, startDate, startHour, startMinute, startSecond);
                        var t2 = Date.UTC(todayYear, todayMonth, todayDate, todayHour, todayMinute, todaySecond);
                        var diff = t2 - t1;
                        var diffYears = Math.floor(diff / years);
                        var diffDays = Math.floor((diff / days) - diffYears * 365);

                        // 区分是否有年份.
                        var language = 'zh-CN';
                        if (startYear === String(todayYear)) {
                            document.getElementById("year").innerHTML = todayYear;
                            var daysTip = 'This site has been running for ' + diffDays + ' days';
                            if (language === 'zh-CN') {
                                daysTip = '本站已运行 ' + diffDays + ' 天';
                            } else if (language === 'zh-HK') {
                                daysTip = '本站已運行 ' + diffDays + ' 天';
                            }
                            document.getElementById("sitetime").innerHTML = daysTip;
                        } else {
                            document.getElementById("year").innerHTML = startYear + " - " + todayYear;
                            var yearsAndDaysTip = 'This site has been running for ' + diffYears + ' years and '
                                + diffDays + ' days';
                            if (language === 'zh-CN') {
                                yearsAndDaysTip = '本站已运行 ' + diffYears + ' 年 ' + diffDays + ' 天';
                            } else if (language === 'zh-HK') {
                                yearsAndDaysTip = '本站已運行 ' + diffYears + ' 年 ' + diffDays + ' 天';
                            }
                            document.getElementById("sitetime").innerHTML = yearsAndDaysTip;
                        }
                    }

                    calcSiteTime();
                </script>
            
            <br>
            
        </div>
        <div class="col s12 m4 l4 social-link social-statis">
    <a href="https://github.com/xiayunquan" class="tooltipped" target="_blank" data-tooltip="访问我的GitHub" data-position="top" data-delay="50">
        <i class="fab fa-github"></i>
    </a>



    <a href="mailto:xiayunquan@yeah.net" class="tooltipped" target="_blank" data-tooltip="邮件联系我" data-position="top" data-delay="50">
        <i class="fas fa-envelope-open"></i>
    </a>







    <a href="tencent://AddContact/?fromId=50&fromSubId=1&subcmd=all&uin=704006530" class="tooltipped" target="_blank" data-tooltip="QQ联系我: 704006530" data-position="top" data-delay="50">
        <i class="fab fa-qq"></i>
    </a>







</div>
    </div>
</footer>

<div class="progress-bar"></div>


    <!-- 搜索遮罩框 -->
<div id="searchModal" class="modal">
    <div class="modal-content">
        <div class="search-header">
            <span class="title"><i class="fas fa-search"></i>&nbsp;&nbsp;搜索</span>
            <input type="search" id="searchInput" name="s" placeholder="请输入搜索的关键字"
                   class="search-input">
        </div>
        <div id="searchResult"></div>
    </div>
</div>

<script type="text/javascript">
$(function () {
    var searchFunc = function (path, search_id, content_id) {
        'use strict';
        $.ajax({
            url: path,
            dataType: "xml",
            success: function (xmlResponse) {
                // get the contents from search data
                var datas = $("entry", xmlResponse).map(function () {
                    return {
                        title: $("title", this).text(),
                        content: $("content", this).text(),
                        url: $("url", this).text()
                    };
                }).get();
                var $input = document.getElementById(search_id);
                var $resultContent = document.getElementById(content_id);
                $input.addEventListener('input', function () {
                    var str = '<ul class=\"search-result-list\">';
                    var keywords = this.value.trim().toLowerCase().split(/[\s\-]+/);
                    $resultContent.innerHTML = "";
                    if (this.value.trim().length <= 0) {
                        return;
                    }
                    // perform local searching
                    datas.forEach(function (data) {
                        var isMatch = true;
                        var data_title = data.title.trim().toLowerCase();
                        var data_content = data.content.trim().replace(/<[^>]+>/g, "").toLowerCase();
                        var data_url = data.url;
                        data_url = data_url.indexOf('/') === 0 ? data.url : '/' + data_url;
                        var index_title = -1;
                        var index_content = -1;
                        var first_occur = -1;
                        // only match artiles with not empty titles and contents
                        if (data_title !== '' && data_content !== '') {
                            keywords.forEach(function (keyword, i) {
                                index_title = data_title.indexOf(keyword);
                                index_content = data_content.indexOf(keyword);
                                if (index_title < 0 && index_content < 0) {
                                    isMatch = false;
                                } else {
                                    if (index_content < 0) {
                                        index_content = 0;
                                    }
                                    if (i === 0) {
                                        first_occur = index_content;
                                    }
                                }
                            });
                        }
                        // show search results
                        if (isMatch) {
                            str += "<li><a href='" + data_url + "' class='search-result-title'>" + data_title + "</a>";
                            var content = data.content.trim().replace(/<[^>]+>/g, "");
                            if (first_occur >= 0) {
                                // cut out 100 characters
                                var start = first_occur - 20;
                                var end = first_occur + 80;
                                if (start < 0) {
                                    start = 0;
                                }
                                if (start === 0) {
                                    end = 100;
                                }
                                if (end > content.length) {
                                    end = content.length;
                                }
                                var match_content = content.substr(start, end);
                                // highlight all keywords
                                keywords.forEach(function (keyword) {
                                    var regS = new RegExp(keyword, "gi");
                                    match_content = match_content.replace(regS, "<em class=\"search-keyword\">" + keyword + "</em>");
                                });

                                str += "<p class=\"search-result\">" + match_content + "...</p>"
                            }
                            str += "</li>";
                        }
                    });
                    str += "</ul>";
                    $resultContent.innerHTML = str;
                });
            }
        });
    };

    searchFunc('/blog/search.xml', 'searchInput', 'searchResult');
});
</script>

    <!-- 回到顶部按钮 -->
<div id="backTop" class="top-scroll">
    <a class="btn-floating btn-large waves-effect waves-light" href="#!">
        <i class="fas fa-arrow-up"></i>
    </a>
</div>


    <script src="/blog/libs/materialize/materialize.min.js"></script>
    <script src="/blog/libs/masonry/masonry.pkgd.min.js"></script>
    <script src="/blog/libs/aos/aos.js"></script>
    <script src="/blog/libs/scrollprogress/scrollProgress.min.js"></script>
    <script src="/blog/libs/lightGallery/js/lightgallery-all.min.js"></script>
    <script src="/blog/js/matery.js"></script>

    <!-- Baidu Analytics -->

    <!-- Baidu Push -->

<script>
    (function () {
        var bp = document.createElement('script');
        var curProtocol = window.location.protocol.split(':')[0];
        if (curProtocol === 'https') {
            bp.src = 'https://zz.bdstatic.com/linksubmit/push.js';
        } else {
            bp.src = 'http://push.zhanzhang.baidu.com/push.js';
        }
        var s = document.getElementsByTagName("script")[0];
        s.parentNode.insertBefore(bp, s);
    })();
</script>

    
    <script src="/blog/libs/others/clicklove.js" async="async"></script>
    
    
    <script async src="/blog/libs/others/busuanzi.pure.mini.js"></script>
    

    

    

    <!--腾讯兔小巢-->
    
    
    <script type="text/javascript" color="0,0,255"
        pointColor="0,0,255" opacity='0.7'
        zIndex="-1" count="99"
        src="/blog/libs/background/canvas-nest.js"></script>
    

    

    

    
    <script src="/blog/libs/instantpage/instantpage.js" type="module"></script>
    

</body>

</html>
